<template>
    <div>
        <el-card shadow="never" class="!border-none">
            <el-alert
                title="设置积分抵现的规则，可以关闭或者开启积分抵扣功能"
                type="warning"
                :closable="false"
                show-icon
            />
            <el-form
                class="mt-4"
                label-width="120px"
                ref="ruleFormRef"
                :model="formData"
                :rules="rules"
            >
                <el-form-item label="积分抵扣" prop="enable">
                    <div>
                        <el-radio-group>
                            <el-switch
                                v-model="formData.enable"
                                active-value="1"
                                inactive-value="0"
                            ></el-switch>
                        </el-radio-group>
                        <div class="form-tips">开启或关闭积分抵扣，关闭后订单结算不能使用积分</div>
                    </div>
                </el-form-item>
                <el-form-item label="积分抵扣比例" prop="scale">
                    <div>
                        <div class="flex">
                            <el-input class="w-[240px]" v-model.number="formData.scale">
                                <template #append>
                                    <div>积分</div>
                                </template>
                            </el-input>
                            <div class="flex-none ml-2">可抵扣1元</div>
                        </div>
                        <div class="form-tips">
                            填写多少积分可以抵扣1元，例如：填写100，表示1积分=0.01元
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="积分使用需超过">
                    <div>
                        <el-input class="w-[240px]" v-model.number="formData.lower_limit">
                            <template #append>
                                <div>积分</div>
                            </template>
                        </el-input>
                        <div class="form-tips">
                            用户账户积分需要超过设定的数值时，才允许在订单中抵现，填0或不填表示没有限制
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="积分抵扣上限" prop="superior_limit">
                    <div>
                        <el-input class="w-[240px]" v-model.number="formData.superior_limit">
                            <template #append>
                                <div>积分</div>
                            </template>
                        </el-input>
                        <div class="form-tips">单次下单积分使用上限，0为不限制</div>
                    </div>
                </el-form-item>
            </el-form>
        </el-card>
        <FooterBtns>
            <el-button
                type="primary"
                @click="submitForm(ruleFormRef)"
                v-perms="['ls:system:config:point_deduction:edit']"
                >保存</el-button
            >
        </FooterBtns>
    </div>
</template>
<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import { pointDeductionDetail, pointDeductionEdit } from '@/api/finance/finance'
import feedback from '@/utils/feedback'
interface IformData {
    enable: string
    scale: string
    lower_limit: string
    superior_limit: string
}

const formData = ref<IformData>({
    enable: '1', //是否开启 1-开启 0-关闭
    scale: '0', //积分抵扣比例
    lower_limit: '0', //积分使用下限
    superior_limit: ' 0' //积分使用上限
})

const ruleFormRef = ref<FormInstance>()

//获取详情
const getDetail = async () => {
    formData.value = await pointDeductionDetail()
}

//表单校验规则
const rules = reactive<FormRules>({
    enable: [{ required: true, message: '请选择是否开启', trigger: 'blur' }],
    scale: [{ required: true, message: '请填写积分抵扣比例', trigger: 'blur' }],
    superior_limit: [{ required: true, message: '请填写积分抵扣上限', trigger: 'blur' }]
})

//保存
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            await pointDeductionEdit(formData.value)
            await getDetail()
            await feedback.msgSuccess('修改成功！')
        } else {
            console.log('error submit!', fields)
        }
    })
}

onMounted(() => {
    getDetail()
})
</script>

<style lang="scss" scoped>
.el-alert--warning.is-light {
    background-color: #edefff;
    color: #4a5dff;
}
</style>
